<template>
    <div>
        <el-row type="flex" justify="space-between" align="center">
            <el-breadcrumb separator="/" style="line-height:32px">
                <el-breadcrumb-item :to="{ path: lastPath }">
                    {{
                        lastPath == '/undergraduateGraduationManagement/collegeComputerReview'
                            ? '学院机审'
                            : '毕业审核'
                    }}
                </el-breadcrumb-item>
                <el-breadcrumb-item>查看机审详情</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="text" @click="handleClick('CANCEL')">返回</el-button>
        </el-row>
        <el-card>
            <h2 slot="header">毕业资格-查看详情</h2>
            <stu-base-info :itemList="studentInfo"></stu-base-info>
            <div v-if="professionalTableData[0] && professionalTableData[0].data.length > 0" style="margin-bottom:16px;">
                <h3 class="title">学分标准</h3>
                <edu-table
                    :header-cell-style="tableHeaderStyle"
                    :data="professionalTableData"
                    :order="false"
                    :pagination="false"
                    border
                    :selection="false"
                    :merge="true"
                    :stripe="false"
                >
                    <edu-table-column
                        align="center"
                        :label="$t('label.courseCategory')"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.courseCategory">
                                {{ scope.row.courseCategory }}
                            </div>
                        </template>
                    </edu-table-column>
                    <edu-table-column
                        align="center"
                        :label="item.labName"
                        v-for="(item, key) in professionalTableData[0] &&
                            professionalTableData[0].data"
                        :key="key"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.data[key]">
                                {{
                                    `${scope.row.data[key].getCredit || 0}/${scope.row.data[key]
                                        .credit || 0}`
                                }}
                            </div>
                        </template>
                    </edu-table-column>
                </edu-table>
            </div>
            <div v-if="generalCourseTableData.length > 0" style="margin-bottom:16px;">
                <edu-table
                    :data="generalCourseTableData"
                    :order="false"
                    :row-style="genTableRowStyle"
                    :pagination="false"
                    border
                    :selection="false"
                    :merge="true"
                    :show-header="false"
                    :stripe="false"
                    style="width: 100%;"
                >
                    <edu-table-column
                        v-for="(item, key) in generalCourseTableData[1] &&
                            generalCourseTableData[1].data"
                        :key="key"
                        min-width="250"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.data[key]">
                                <div
                                    class="float-left"
                                    :style="{
                                        'background-color': scope.$index == 0 ? '#EEF7FF' : '',
                                        width: '130spx',
                                        'text-align': 'right',
                                        'margin-right': '16px'
                                    }"
                                >
                                    {{ scope.row.data[key].labName }}:
                                </div>
                                <div class="float-left">
                                    {{
                                        `${scope.row.data[key].getCredit || 0}/${scope.row.data[key]
                                            .credit || 0}`
                                    }}
                                </div>
                            </div>
                        </template>
                    </edu-table-column>
                </edu-table>
            </div>
            <div v-if="courseCompletion.length > 1" style="margin-bottom:16px;">
                <h3 class="title">课程完成情况</h3>
                <el-table
                    :header-cell-style="tableHeaderStyle"
                    :row-style="tableRowStyle"
                    :data="courseCompletion"
                    :span-method="objectSpanMethod"
                    :order="false"
                    :pagination="false"
                    :border="true"
                    :selection="false"
                    :stripe="false"
                    style="width: 100%;"
                >
                    <el-table-column
                        label="课程类别"
                        show-overflow-tooltip
                        prop="labName"
                        min-width="130px"
                    ></el-table-column>
                    <el-table-column
                        label="课程代码"
                        width="80"
                        prop="courseCode"
                    ></el-table-column>
                    <el-table-column
                        label="课程名称"
                        prop="courseName"
                        width="130"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="学分" prop="credits" width="50"></el-table-column>
                    <el-table-column label="学期" prop="term" width="50"></el-table-column>
                    <el-table-column
                        label="开课学院"
                        prop="collegeI18n"
                        width="80"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="是否必修" prop="compulsory" width="80">
                        <template slot-scope="scope">
                            <div>{{ scope.row.compulsory == 1 ? '是' : '否' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注"
                        prop="remark"
                        show-overflow-tooltip
                        width="100"
                    ></el-table-column>
                    <el-table-column label="选课情况" width="80">
                        <template slot-scope="scope">
                            <span>{{ +scope.row.selCourse == 1 ? '已选课' : '未选课' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="成绩" width="60" prop="score"></el-table-column>
                    <el-table-column label="完成情况" width="80">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.isPass === 0 ? 'danger' : 'success'">
                                {{ scope.row.isPass === 0 ? '未完成' : '已完成' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="替换课程代码"
                        width="110"
                        prop="replaceCourseCode"
                    ></el-table-column>
                    <el-table-column
                        label="替换课程名称"
                        show-overflow-tooltip
                        prop="replaceCourseName"
                    ></el-table-column>
                </el-table>
                <div style="margin-top:8px;font-size:12px;font-weight:400">
                    <span style="color: red;">*</span>其它类别课程为学生已修有成绩但不在培养计划内的课程
                </div>
            </div>
            <div v-if="creditRecognitonCourse.length > 0" style="margin-bottom:16px;">
                <h3 class="title">学分认定课程</h3>
                <edu-table
                    :header-cell-style="tableHeaderStyle"
                    :data="creditRecognitonCourse"
                    :order="false"
                    :border="true"
                    :pagination="false"
                    :selection="false"
                    :stripe="false"
                    style="width: 100%;"
                >
                    <edu-table-column label="计划外课程代码" prop="courseCode"></edu-table-column>
                    <edu-table-column label="课程名称" prop="courseName"></edu-table-column>
                    <edu-table-column
                        label="计划内课程代码"
                        prop="replaceCourseCode"
                    ></edu-table-column>
                    <edu-table-column label="课程名称" prop="replaceCourseName"></edu-table-column>
                </edu-table>
            </div>
            <div v-if="tskList.length > 0" style="margin-bottom:16px;">
                <h3 class="title">通识必修课免修课程</h3>
                <el-table
                    :header-cell-style="tableHeaderStyle"
                    :row-style="tableRowStyle"
                    :data="tskList"
                    :span-method="objectSpanMethods"
                    :order="false"
                    :pagination="false"
                    :border="true"
                    :selection="false"
                    :stripe="false"
                    style="width: 100%;"
                >
                    <el-table-column
                        label="课程类别"
                        show-overflow-tooltip
                        prop="labName"
                    ></el-table-column>
                    <el-table-column
                        label="课程代码"
                        prop="courseCode"
                    ></el-table-column>
                    <el-table-column
                        label="课程名称"
                        prop="courseName"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="学分" prop="credits" width="50"></el-table-column>
                    <el-table-column
                        label="开课学院"
                        prop="collegeI18n"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="是否必修" prop="compulsory" width="80">
                        <template slot-scope="scope">
                            <div>{{ scope.row.compulsory == 1 ? '是' : '否' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注"
                        prop="remark"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column label="选课情况" width="80">
                        <template slot-scope="scope">
                            <span>{{ +scope.row.selCourse == 1 ? '已选课' : '未选课' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="成绩" width="60" prop="score"></el-table-column>
                    <el-table-column label="完成情况" width="80">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.isPass === 0 ? 'danger' : 'success'">
                                {{ scope.row.isPass === 0 ? '未完成' : '已完成' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-row type="flex" justify="end">
                <el-button @click="handleClick('PREW')">上一位</el-button>
                <el-button @click="handleClick('NEXT')">下一位</el-button>
                <el-button @click="handleClick('CANCEL')">取消</el-button>
            </el-row>
        </el-card>
    </div>
</template>


<script>
let itemList = [
    {
        label: '姓名',
        key: 'name',
        value: ''
    },
    {
        label: '学号',
        key: 'studentId',
        value: ''
    },
    {
        label: '毕业年份',
        key: 'graduationDate',
        value: ''
    },
    {
        label: '学院',
        key: 'facultyI18n',
        value: ''
    },
    {
        label: '专业',
        key: 'professionI18n',
        value: ''
    },
    {
        label: '学制',
        key: 'lengthSchooling',
        value: ''
    },
    {
        label: '绩点',
        key: 'scorePoint',
        value: ''
    },
    {
        label: '总学分',
        key: 'totalCredit',
        value: ''
    },
    {
        label: '机审结果',
        key: 'machineConclusionI18n',
        value: ''
    }
]
import Bus from 'common/src/utils/bus'
import stuBaseInfo from './component/stuBaseInfo'
import { getMachineDetail ,findPreviousOrNextStep } from 'common/src/api/graduationManagement/graduationList'
export default {
    name: 'graduationQualificationAuditDetail',
    components: {
        'stu-base-info': stuBaseInfo
    },
    data() {
        return {
            lastPath: '',
            studentId: '',
            studentInfo: [],
            professionalTableData: [], //学分标准
            generalCourseTableData: [], //通识选修课学分标准
            courseCompletion: [], //课程完成情况
            creditRecognitonCourse: [], //学分认定课程
            courseCompletionObj: {}, //课程完成情况maplist数据
            lastQueryForm:{},
            tskList: [], //通识选修课免修课程
        }
    },
    mounted() {
        let params = this.$route.query
        this.lastPath = params.currentPath
        this.studentId = params.studentId
        this.lastQueryForm = params.queryForm
        this.queryMachineDetail();
    },
    methods: {
        async queryMachineDetail(studentId = this.studentId) {
            let { code, data } = await getMachineDetail(studentId)
            if (code !== 200) return
            this.creditRecognitonCourse = data.crditCourseList
            this.courseCompletion = _.sortBy(data.planCourseList, function(item) {
                return item.labID
            })
            let totalCredit = 0
            this.courseCompletion.forEach(item => {
                if (+item.labID === 999999) {
                    item.labName = '其它'
                }
                totalCredit += item.credits
            })
            if (data.studentInfo) {
                data.studentInfo.professionI18n = data.studentInfo.professionName || data.studentInfo.professionI18n;
            }
            itemList.forEach(item => (item.value = data.studentInfo && data.studentInfo[item.key]))
            this.studentInfo = itemList
            this.mergeRow(this.courseCompletion);
            // for (let key in this.courseCompletionObj) {
            //     let index = this.courseCompletion.findIndex(item => item.labID == key)
            //     this.courseCompletion[index].isFirst = true
            //     this.courseCompletion[index].len = this.courseCompletionObj[key].length
            // }
            this.courseCompletion.push({ labName: '总学分', credits: totalCredit, isTotal: true })
            this.handleLabelStandard(data.labelStand)
            this.handleElectiveStandard(data.electiveStand)
            this.tskList = data.tskList || [];
            this.mergeRow(this.tskList);
        },
        mergeRow(originData) {
            if (!originData) return
            let listMap = originData.reduce((pre, cur, index) => {
                return {
                    ...pre,
                    [cur.labID]: pre[cur.labID] ? [...pre[cur.labID], cur] : [cur]
                }
            }, {})
            for (let key in listMap) {
                let index = originData.findIndex(item => item.labID == key)
                originData[index].isFirst = true
                originData[index].len = listMap[key].length
            }
        },
        goBack() {
            this.$store.commit('delete_tabs', this.$route.path)
            this.$router.push({
                path: this.lastPath
            })
        },
        /**
         * 查询当前学生上一位、下一位的学生id
         * step 0:下一步；1：上一步
         * isOverseas 0:国内生；1留学生
         * currentStudentId :当前学生ID
         */
        async getStudentId(currentStudentId = '', step = 0) {
            let { code, data } = await findPreviousOrNextStep({...this.lastQueryForm,currentStudentId, step})
            if (code !== 200) return
            if (!data) {
                let msg
                if (!step) {
                    msg = '已经是最后一位学生了'
                } else {
                    msg = '已经是最前一位学生了'
                }
                this.$message({
                    type: 'warning',
                    message: msg
                })
            } else {
                this.studentId = data
                this.resetData();
                this.queryMachineDetail()
            }
        },
        handleClick(mode) {
            let _this = this
            let actions = {
                CANCEL: function() {
                    _this.goBack()
                },
                PREW: function() {
                    _this.getStudentId(_this.studentId,1)
                },
                NEXT: function() {
                    _this.getStudentId(_this.studentId,0)
                }
            }
            return actions[mode]()
        },
        //学分标准数据转换
        handleLabelStandard(data) {
            if (!data || !data.length) return
            let labIdMap = {}
            let totalItem = {
                getCredit: 0
            }
            data.forEach(item => {
                item.credit = item.credit || 0
                if (item.orderNum === 999) {
                    totalItem = Object.assign(item, totalItem)
                } else {
                    totalItem.getCredit += item.getCredit
                    if (!item.parentLabID) {
                        let labID = item.labID + '_'
                        if (!labIdMap[labID]) {
                            labIdMap[labID] = []
                        }
                        labIdMap[labID].push(item)
                    } else {
                        let parentLabID = item.parentLabID + '_'
                        if (!labIdMap[parentLabID]) {
                            labIdMap[parentLabID] = []
                        }
                        labIdMap[parentLabID].push(item)
                    }
                }
            })
            let newList = [
                {
                    courseCategory: '已完成学分',
                    data: []
                },
                {
                    courseCategory: this.$t('auditStandard.creditTotal'),
                    data: []
                },
                {
                    courseCategory: this.$t('auditStandard.totalCredits'),
                    data: [totalItem]
                }
            ]
            for (let key in labIdMap) {
                labIdMap[key].sort((item1, item2) => {
                    return item2.orderNum - item1.orderNum
                })
                let len = newList[1].data.length
                if (labIdMap[key] && labIdMap[key].length > 1) {
                    let num = 0
                    let parentCredit = 0
                    let parentGetcredit = 0
                    let parentItem = null
                    labIdMap[key].forEach(v => {
                        if (v.parentLabID) {
                            newList[0].data.push(v)
                            parentCredit += Number(v.credit)
                            parentGetcredit += Number(v.getCredit)
                            num++
                        } else {
                            parentItem = v
                            newList[1].data.push(v)
                        }
                    })
                    parentItem && (parentItem.credit = parentCredit)
                    parentItem && (parentItem.getCredit = parentGetcredit)
                    if (!newList[1].columnList) {
                        newList[1].columnList = []
                    }
                    num > 1 &&
                        newList[1].columnList.push({
                            index: len + 1,
                            rowspan: 1,
                            colspan: num
                        })
                } else {
                    if (labIdMap[key].length === 1) {
                        newList[0].data.push(labIdMap[key][0])
                        newList[1].data.push(labIdMap[key][0])
                    }
                }
            }
            let totalNum = newList[0].data.length
            newList[2].columnList = [
                {
                    index: 1,
                    rowspan: 1,
                    colspan: totalNum
                }
            ]
            this.professionalTableData = newList
        },
        handleElectiveStandard(param) {
            if (!param || !param.length) return
            let totals = 0
            let data = param.filter(v => {
                if (v.orderNum === 999) {
                    totals = v.credit
                }
                return v.orderNum !== 999
            })

            let len = data.length
            let index = 1
            let list = [
                {
                    data: [
                        {
                            labName: this.$t('auditStandard.creditStandardGeneralCourses'),
                            credit: 0
                        }
                    ]
                }
            ]
            let calcuTotal = 0
            for (let i = 0; i < len; i++) {
                data[i].getCredit && (calcuTotal += Number(data[i].getCredit))

                if (i !== 0 && i % 4 === 0) {
                    index++
                }
                if (!list[index]) {
                    list[index] = {
                        data: []
                    }
                }
                data[i].getCredit = data[i].getCredit || 0
                list[index].data.push(data[i])
            }
            ;(list[0].columnList = [
                {
                    index: 0,
                    rowspan: 1,
                    colspan: list[1].data.length
                }
            ]),
                (list[0].data[0].getCredit = calcuTotal)
            list[0].data[0].credit = totals
            this.generalCourseTableData = list
        },
        tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
            return 'background-color:#EEF7FF;font-weight:400;'
        },
        tableRowStyle({ row, rowIndex }) {
            if (rowIndex == this.courseCompletion.length - 1) {
                return 'background-color:#EEF7FF;font-weight:400;'
            }
        },
        genTableRowStyle({ row, rowIndex }) {
            if (!rowIndex) {
                return 'background-color:#EEF7FF;font-weight:400;'
            }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.isFirst) {
                    return {
                        rowspan: row.len,
                        colspan: 1
                    }
                } else if (rowIndex < this.courseCompletion.length - 1) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
            if (rowIndex == this.courseCompletion.length - 1) {
                if (columnIndex == 3) {
                    return {
                        rowspan: 1,
                        colspan: 10
                    }
                } else if (columnIndex == 0) {
                    return {
                        rowspan: 1,
                        colspan: 3
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
        },
        objectSpanMethods({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (row.isFirst) {
                    return {
                        rowspan: row.len,
                        colspan: 1
                    }
                } else  {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                }
            }
        },
        resetData() {
            Object.assign(this.$data,{
                studentInfo: [],
                professionalTableData: [],
                generalCourseTableData: [],
                courseCompletion: [],
                creditRecognitonCourse: [],
                courseCompletionObj: {},
                tskList: []
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    font-weight: bold !important;
}
</style>